import React from 'react';
import { useInitPaletteEffect } from '../hooks/useInitPalette';
import { useLoadOriginPicureEffect } from '../hooks/useLoadOriginPicure';
import type { DrawPalette } from '../microPalette/DrawPalette';
import { DrawBoardContainer, DrawBoardInner } from './styled';

export interface DrawBoardProps {
  initPalateCallback: (instance: DrawPalette) => void;
}
export const DrawBoard = (props: DrawBoardProps) => {
  const ContainerRef = React.useRef<HTMLDivElement>(null);

  // /** Step1: 初始化画板 */
  const paletteIns = useInitPaletteEffect(ContainerRef, (currPaletteIns) => {
    props.initPalateCallback(currPaletteIns);
  });
  // /** Step2: 加载原始图片（视频帧） */
  useLoadOriginPicureEffect(paletteIns);

  return (
    <DrawBoardContainer>
      <DrawBoardInner ref={ContainerRef} />
    </DrawBoardContainer>
  );
};
